import React from 'react'
import { ReactSVG } from 'react-svg'

interface SvgIconProps {
  name: string
  width?: number
  height?: number
  fill?: string
  className?: string
}

const SvgIcon: React.FC<SvgIconProps> = ({
  name,
  width = 24,
  height = 24,
  fill = 'currentColor',
  className = ''
}) => {
  return (
    <ReactSVG
      src={`/icons/${name}.svg`}
      beforeInjection={(svg) => {
        svg.setAttributeNS(
          null,
          'style',
          `width: ${width}px; height: ${height}px; fill: ${fill}`
        )
        svg.setAttributeNS(null, 'class', className) // Setting class name
      }}
    ></ReactSVG>
  )
}

export default SvgIcon
